// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('Counter 1.constructor');
  }
  componentWillMount() {
    console.log('Counter 2.componentWillMount');
  }
  componentDidMount() {
    console.log('Counter 4.componentDidMount');
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Counter 5.shouldComponentUpdate');
    // 奇数不更新，偶数更新 其实不管此方法返回true还是false, this.state其实都会改变 ，如果返回true的话页面会刷新
    return nextState.count % 2 === 0;
  }
  componentWillUpdate() {
    console.log('Counter 6.componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('Counter 7.componentDidUpdate');
  }
  render() {
    console.log('Counter 3.render');
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }

}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",


// 生命周期

// Counter 1.constructor
// Counter 2.componentWillMount
// Counter 3.render
// Counter 4.componentDidMount

// 更新
// Counter 5.shouldComponentUpdate // 这里可以阻止是否继续执行再次渲染页面，false 不继续，true 继续
// Counter 6.componentWillUpdate
// Counter 3.render
// Counter 7.componentDidUpdate
// constructor-componentWillMount-render-componentDidMount-shouldComponentUpdate-componentWillUpdate-componentDidUpdate